CSS @scroll-timeline hallinta: Animaatioiden ohjaus vierityksen edistymisen avulla

Web-kehityksen jatkuvasti kehittyvässä maisemassa mukaansatempaavien ja interaktiivisten käyttökokemusten luominen on ensiarvoisen tärkeää. CSS tarjoaa erilaisia työkaluja tämän saavuttamiseksi, ja yksi tehokkaimmista, mutta usein unohdetuista, on @scroll-timeline at-rule. Tämän ominaisuuden avulla kehittäjät voivat sitoa animaatioita suoraan elementin vierityksen edistymiseen, luoden kiehtovia vierityksen ohjaamia animaatioita. Tämä artikkeli tarjoaa kattavan tutustumisen @scroll-timeline -ominaisuuteen, kattaen sen syntaksin, ominaisuudet, käytännön käytön ja edistyneet animaatiotekniikat web-suunnittelusi parantamiseksi.

Mikä on CSS @scroll-timeline?

@scroll-timeline on CSS at-rule, joka määrittää vierityksen aikajanan, joka on pohjimmiltaan sarja tiloja, jotka vastaavat määritetyn elementin vierityspaikkaa. Sen sijaan, että luotettaisiin perinteisiin aikaan perustuviin animaatioihin, @scroll-timeline yhdistää animaation edistymisen käyttäjän vieritystoimintaan. Tämä johtaa luonnollisempaan ja responsiivisempaan animaatioon, koska animaation nopeutta ohjaa suoraan käyttäjän vierityskäyttäytyminen.

Tämä avaa jännittäviä mahdollisuuksia:

• Visuaalinen tarinankerronta: Paljasta sisältöä asteittain käyttäjän vierittäessä.
• Interaktiivinen datan visualisointi: Animoi kaavioita ja graafeja käyttäjän tutkiessa dataa.
• Parallax-efektit: Luo syvyyttä ja ulottuvuutta animoimalla eri elementtejä eri nopeuksilla vieritysposition perusteella.
• Edistymisen ilmaisimet: Visuaalisesti edustavat käyttäjän edistymistä pitkässä dokumentissa.

Syntaksi ja ominaisuudet

@scroll-timeline at-rule:n perussyntaksi on seuraava:

            @scroll-timeline aikajana-nimi {
  source: auto | <elementin-valitsin>;
  orientation: auto | block | inline;
  scroll-offsets: <vierityksen-offset>[ , <vierityksen-offset> ]*;
}

            

              
                Copy
              
            
          

Puretaan jokainen ominaisuus osiin:

timeline-name

Tämä on vierityksen aikajanasi yksilöllinen tunniste. Käytät tätä nimeä viittaamaan aikajanaan, kun käytät sitä animaatioon.

Esimerkki:

            @scroll-timeline minun-vieritys-aikajana {
  /* ... */
}

            

              
                Copy
              
            
          

source

Tämä ominaisuus määrittää elementin, jonka vierityspaikka ohjaa animaatiota. Sillä voi olla kaksi arvoa:

• auto: Selain määrittää vieritettävän elementin automaattisesti. Tämä on usein dokumentin näkymäportti (selainikkuna).
• <elementin-valitsin>: CSS-valitsin, joka tunnistaa tietyn elementin, jota käytetään vierityslähteenä. Tämän avulla voit kohdistaa tiettyjä säiliöitä tai osioita sivullasi.

Esimerkki (käyttäen näkymäporttia lähteenä):

            @scroll-timeline minun-vieritys-aikajana {
  source: auto; /* Käyttää näkymäporttia */
  /* ... */
}

            

              
                Copy
              
            
          

Esimerkki (käyttäen tiettyä elementtiä lähteenä):

            @scroll-timeline minun-vieritys-aikajana {
  source: #vieritettava-säiliö; /* Käyttää elementtiä, jonka ID on "vieritettava-säiliö" */
  /* ... */
}

            

              
                Copy
              
            
          

orientation

Tämä ominaisuus määrittää vierityssuunnan, jota käytetään aikajanalle. Se määrittää, ohjaako animaatiota pysty- vai vaakavieritys. Sillä voi olla kolme arvoa:

• auto: Selain määrittää vierityssuunnan automaattisesti lähdeelementin hallitsevan vierityssuunnan perusteella.
• block: Käyttää lohkon (pystysuuntainen useimmissa kirjoitustiloissa) vierityssuuntaa.
• inline: Käyttää rivin (vaakasuuntainen useimmissa kirjoitustiloissa) vierityssuuntaa.

Esimerkki (käyttäen pystysuuntaista vieritystä):

            @scroll-timeline minun-vieritys-aikajana {
  source: auto;
  orientation: block; /* Pystysuuntainen vieritys */
  /* ... */
}

            

              
                Copy
              
            
          

Esimerkki (käyttäen vaakasuuntaista vieritystä):

            @scroll-timeline minun-vieritys-aikajana {
  source: #vaakavieritys-säiliö;
  orientation: inline; /* Vaakasuuntainen vieritys */
  /* ... */
}

            

              
                Copy
              
            
          

scroll-offsets

Tämä ominaisuus määrittää vierityspaikat, jotka vastaavat animaation tiettyjä kohtia. Se on valinnainen ominaisuus, ja jos sitä ei määritetä, animaatio toistetaan vieritettävän alueen alusta loppuun. Käytettäessä voit määrittää yhden tai useamman vierityksen offsetin, joista jokainen määrittää vieritysposition ja vastaavan kohdan animaation edistymisessä.

<vierityksen-offset> -ominaisuuden syntaksi on:

            <vierityksen-offset> = <pituus-prosentti> [ at <pituus-prosentti> ]

            

              
                Copy
              
            
          

Missä:

• Ensimmäinen <pituus-prosentti> edustaa vieritysposition vieritettävällä alueella.
• Valinnainen at <pituus-prosentti> edustaa vastaavaa animaation edistymistä (0 % - 100 %). Jos jätetään pois, animaation edistyminen jakautuu tasaisesti määritettyjen vierityksen offsettien välillä.

Esimerkit:

            /* Vierityspaikka 200 pikseliä vastaa animaation edistymistä 0 % */
scroll-offsets: 200px at 0%;

/* Vierityspaikka 50 % vieritettävästä alueesta vastaa animaation edistymistä 50 % */
scroll-offsets: 50% at 50%;

/* Useita offsettejä: */
scroll-offsets: 0px at 0%, 500px at 50%, 1000px at 100%;

/* Ilman "at"-avainsanaa - tasaisesti jaettu animaation edistyminen: */
scroll-offsets: 0px, 500px, 1000px; /* Vastaa arvoa 0px at 0%, 500px at 50%, 1000px at 100% */

            

              
                Copy
              
            
          

Tärkeitä huomioita scroll-offsets -ominaisuudelle:

• Jos määrität scroll-offsets -ominaisuuden, varmista, että ne kattavat vieritettävän alueen, jotta vältät odottamattoman animaatiokäyttäytymisen.
• Animaation edistyminen interpoloidaan määritettyjen vierityksen offsettien välillä.
• Jos et määritä scroll-offsets -ominaisuutta, animaation edistyminen jakautuu tasaisesti koko vieritettävälle alueelle.

Vierityksen aikajanan käyttäminen animaatioon

Kun olet määrittänyt vierityksen aikajanasi, sinun on sovellettava sitä CSS-animaatioon animation-timeline -ominaisuuden avulla.

Syntaksi on yksinkertainen:

            animation-timeline: aikajana-nimi; /* Käytä nimeä, jonka määrittelit @scroll-timeline -kohdassa */

            

              
                Copy
              
            
          

Sinun on myös määritettävä vakio CSS-animaatio käyttämällä @keyframes -ominaisuutta. Animaatio määrittää CSS-ominaisuuksien muutokset, jotka tapahtuvat käyttäjän vierittäessä. Lisäksi kannattaa varmistaa, että `animation-range` CSS-ominaisuus on asetettu. Se määrittää vierityksen aikajanan alueen, joka aktivoi animaation.

Tässä on täydellinen esimerkki:

            /* Määritä vierityksen aikajana */
@scroll-timeline minun-vieritys-aikajana {
  source: auto;
  orientation: block;
}

/* Määritä animaatio */
@keyframes haalistus-sisään {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Käytä animaatiota ja vierityksen aikajanaa elementtiin */
.animoitu-elementti {
  animation: haalistus-sisään 1s forwards;
  animation-timeline: minun-vieritys-aikajana;
  animation-range: entry 25% cover 75%; /* entry ja cover ovat avainsana-arvoja alku- ja loppualueille */
}

            

              
                Copy
              
            
          

Tässä esimerkissä:

• @scroll-timeline nimeltä minun-vieritys-aikajana on määritetty käyttäen näkymäporttia lähteenä ja pystysuuntaista vieritystä suuntana.
• @keyframes nimeltä haalistus-sisään määrittää yksinkertaisen haalistus-sisään ja liu'uta-ylös animaation.
• .animoitu-elementti -luokkaan on sovellettu haalistus-sisään -animaatio, mutta ajastimen käynnistämisen sijaan sitä ohjaa minun-vieritys-aikajana.
• Animation-range määrittää, että animaation tulisi alkaa, kun elementin yläreuna saapuu näkymäportin alareunaan 25 % ja päättyä, kun se poistuu yläreunasta 25 %.

Käytännön esimerkkejä ja käyttötapauksia

1. Sisällön asteittainen paljastaminen

HTML:

            <section class="sisältö-osio">
  <h2>Osio 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

<section class="sisältö-osio">
  <h2>Osio 2</h2>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
</section>

            

              
                Copy
              
            
          

CSS:

            @scroll-timeline paljasta-aikajana {
  source: auto;
  orientation: block;
}

@keyframes paljasta {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.sisältö-osio {
  animation: paljasta 1s forwards;
  animation-timeline: paljasta-aikajana;
  animation-range: entry 25% cover 75%;
}

            

              
                Copy
              
            
          

2. Parallax-efektit

Parallax-efektit luovat syvyyden tunteen siirtämällä taustaelementtejä eri nopeuksilla kuin etualan elementtejä. @scroll-timeline helpottaa parallax-vierityksen toteuttamista.

HTML:

            <div class="parallax-säiliö">
  <div class="tausta-elementti"></div>
  <div class="etuala-elementti">
    <h2>Parallax-osio</h2>
    <p>Jonkin verran sisältöä tässä...</p>
  </div>
</div>

            

              
                Copy
              
            
          

CSS:

            .parallax-säiliö {
  position: relative;
  height: 500px; /* Säädä tarpeen mukaan */
  overflow: hidden;
}

.tausta-elementti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg'); /* Korvaa kuvallasi */
  background-size: cover;
  transform: translateZ(-1px) scale(2); /* Luo parallax-efektin */
  transform-origin: top;
  pointer-events: none; /* Sallii napsauttamisen etualan elementtejä */

  animation: parallax-bg 1s linear forwards;
  animation-timeline: parallax-aikajana;
  animation-range: 0vh 100vh;
}

.etuala-elementti {
  position: relative;
  z-index: 1;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.8);
}

@scroll-timeline parallax-aikajana {
  source: auto;
  orientation: block;
}

@keyframes parallax-bg {
    0% { transform: translateZ(-1px) scale(2) translateY(0px); }
    100% { transform: translateZ(-1px) scale(2) translateY(-50vh); }
}

            

              
                Copy
              
            
          

3. Edistymispalkin animointi

Voit käyttää @scroll-timeline -ominaisuutta luodaksesi edistymispalkin, joka visuaalisesti edustaa käyttäjän vierityksen edistymistä dokumentissa.

HTML:

            <div class="edistymispalkki-säiliö">
  <div class="edistymispalkki"></div>
</div>
<div class="sisältö">
  <!-- Sisältösi tässä -->
</div>

            

              
                Copy
              
            
          

CSS:

            .edistymispalkki-säiliö {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.edistymispalkki {
  height: 100%;
  width: 0%;
  background-color: #007bff;
  animation: edistymispalkki-täyttö 1s linear forwards;
  animation-timeline: document-scroll-timeline;
}

@scroll-timeline document-scroll-timeline {
  source: auto;
  orientation: block;
}

@keyframes edistymispalkki-täyttö {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

            

              
                Copy
              
            
          

Edistyneet tekniikat

Kun olet ymmärtänyt perusasiat, voit tutustua joihinkin edistyneisiin tekniikoihin luodaksesi vieläkin kehittyneempiä vierityksen ohjaamia animaatioita.

1. scroll-offsets -ominaisuuden käyttäminen tarkan ohjauksen saavuttamiseksi

scroll-offsets -ominaisuuden avulla voit kartoittaa tietyt vierityspaikat animaation tietyille edistymisarvoille. Tämä on hyödyllistä, kun haluat käynnistää tiettyjä animaatiotiloja tietyissä kohdissa vierityksen aikana.

            @scroll-timeline mukautettu-aikajana {
  source: #vieritettava-säiliö;
  orientation: block;
  scroll-offsets: 100px at 0%, 500px at 50%, 1000px at 100%;
}

@keyframes mukautettu-animaatio {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}

.animoitu-elementti {
  animation: mukautettu-animaatio 1s forwards;
  animation-timeline: mukautettu-aikajana;
}

            

              
                Copy
              
            
          

• Alkaa kohdasta translateX(-100px) ja opacity: 0, kun vierityspaikka on 100 pikseliä.
• Saavuttaa kohdan translateX(0) ja opacity: 1, kun vierityspaikka on 500 pikseliä.
• Päättyy kohtaan translateX(100px) ja opacity: 0, kun vierityspaikka on 1000 pikseliä.

2. Yhdistäminen JavaScriptiin

Vaikka @scroll-timeline tarjoaa tehokkaan animaatioiden ohjauksen CSS:n kautta, voit yhdistää sen JavaScriptiin saadaksesi entistä suuremman joustavuuden. Voit esimerkiksi käyttää JavaScriptiä seuraaviin toimiin:

• Laskea ja päivittää dynaamisesti scroll-offsets -ominaisuutta näkymäportin koon tai sisällön muutosten perusteella.
• Käynnistää lisää JavaScript-pohjaisia tehosteita tai vuorovaikutuksia vierityksen edistymisen perusteella.
• Toteuttaa vararatkaisuja selaimille, jotka eivät täysin tue @scroll-timeline -ominaisuutta.

            const vieritettavaElementti = document.getElementById('vieritettava-säiliö');
const animoituElementti = document.querySelector('.animoitu-elementti');

vieritettavaElementti.addEventListener('scroll', () => {
  const vierityspaikka = vieritettavaElementti.scrollTop;
  const maksimiVieritys = vieritettavaElementti.scrollHeight - vieritettavaElementti.clientHeight;
  const vierityksenProsenttiosuus = (vierityspaikka / maksimiVieritys) * 100;

  animoituElementti.style.setProperty('--vieritys-edistyminen', vierityksenProsenttiosuus + '%');
});

            

              
                Copy
              
            
          

Voit sitten käyttää tätä CSS-muuttujaa animaatiossasi:

            @keyframes mukautettu-animaatio {
  0% {
    transform: translateX(calc(var(--vieritys-edistyminen) * -1px));
  }
  100% {
    transform: translateX(calc(var(--vieritys-edistyminen) * 1px));
  }
}

.animoitu-elementti {
  --vieritys-edistyminen: 0%; /* Alkuarvo */
  animation: mukautettu-animaatio 1s linear forwards;
  animation-timeline: vierityksen-ohjaama-aikajana;
}

            

              
                Copy
              
            
          

3. Erilaisten helpotustoimintojen hyödyntäminen

Selaimen yhteensopivuus ja vararatkaisut

Loppuvuodesta 2023 @scroll-timeline -ominaisuudella on suhteellisen hyvä selaimen tuki moderneissa selaimissa, kuten Chrome, Edge, Firefox ja Safari. On kuitenkin tärkeää tarkistaa nykyinen yhteensopivuustila verkkosivustoilla, kuten Can I use..., ennen sen toteuttamista tuotannossa.

Selaimille, jotka eivät tue @scroll-timeline -ominaisuutta, voit tarjota vararatkaisun perinteisten JavaScript-pohjaisten vieritystapahtumakuuntelijoiden ja animaatiokirjastojen, kuten GSAP (GreenSock Animation Platform) tai Anime.js, avulla. Voit myös käyttää CSS-ominaisuuskyselyitä (@supports) soveltaaksesi ehdollisesti joko @scroll-timeline -pohjaisia animaatioita tai JavaScript-pohjaisia vararatkaisuja.

            @supports (animation-timeline: scroll()) {
  /* Käytä @scroll-timeline-pohjaisia animaatioita */
  .animoitu-elementti {
    animation: haalistus-sisään 1s forwards;
    animation-timeline: minun-vieritys-aikajana;
  }
} @else {
  /* Käytä JavaScript-pohjaista vararatkaisua */
  .animoitu-elementti {
    /* Piilota aluksi */
    opacity: 0;
  }

  /* (JavaScript-koodi vierityksen havaitsemiseen ja peittävyyden soveltamiseen) */
}

            

              
                Copy
              
            
          

Esteettömyysnäkökohdat

Kun käytät @scroll-timeline -ominaisuutta tai mitä tahansa animaatiotekniikkaa, on erittäin tärkeää ottaa huomioon esteettömyys. Varmista, että animaatiosi eivät aiheuta:

• Kohtauksia: Vältä vilkkuvia tai nopeasti muuttuvia animaatioita.
• Häiriöitä: Tarjoa käyttäjille tapa keskeyttää tai poistaa animaatiot käytöstä, erityisesti jos ne ovat pitkiä tai häiritseviä.
• Kognitiivista ylikuormitusta: Käytä animaatioita säästeliäästi ja varmista, että niillä on selkeä tarkoitus, sen sijaan, että ne olisivat puhtaasti koristeellisia.
• Matkapahoinvointia: Ole tietoinen parallax-efekteistä, koska ne voivat aiheuttaa matkapahoinvointia joillekin käyttäjille.

Harkitse vaihtoehtoisia tapoja käyttää animaatioiden kautta esitettyjä tietoja, kuten staattista sisältöä tai kuvaavaa tekstiä. Käytä ARIA-attribuutteja tarjotaksesi semanttista merkitystä ja kontekstia avustaville tekniikoille.

Parhaat käytännöt

• Käytä kuvaavia aikajanojen nimiä: Valitse aikajanojen nimet, jotka osoittavat selkeästi niiden tarkoituksen (esim. parallax-tausta-aikajana, paljasta-osio-aikajana).
• Pidä animaatiot suorituskykyisinä: Optimoi animaatiosi välttääksesi suorituskyvyn pullonkauloja. Käytä laitteistokiihdytettyjä CSS-ominaisuuksia, kuten transform ja opacity, aina kun mahdollista.
• Testaa perusteellisesti: Testaa animaatiosi eri laitteilla ja selaimilla varmistaaksesi, että ne toimivat odotetusti eivätkä aiheuta esteettömyys- tai suorituskykyongelmia.
• Aloita yksinkertaisesta: Aloita yksinkertaisilla animaatioilla ja lisää asteittain monimutkaisuutta kokemuksesi karttuessa.
• Ota huomioon käyttökokemus: Varmista, että animaatiosi parantavat käyttökokemusta eivätkä heikennä sitä. Vältä liian monimutkaisia tai häiritseviä animaatioita.
• Käytä `animation-range` CSS-ominaisuutta: Varmista, että animaatiot käynnistyvät vain, kun elementti on näkymäportissa sujuvan ja ennustettavan kokemuksen saavuttamiseksi.

Johtopäätös

@scroll-timeline on tehokas CSS-ominaisuus, jonka avulla kehittäjät voivat luoda mukaansatempaavia ja interaktiivisia vierityksen ohjaamia animaatioita. Linkittämällä animaatiot käyttäjän vierityskäyttäytymiseen voit luoda luonnollisempia ja reagoivampia verkkokokemuksia. Ymmärtämällä sen syntaksin, ominaisuudet ja edistyneet tekniikat voit hyödyntää @scroll-timeline -ominaisuutta parantaaksesi web-suunnittelusi ja luodaksesi kiehtovia käyttäjämatkoja. Muista ottaa huomioon selaimen yhteensopivuus, esteettömyys ja suorituskyky, kun otat käyttöön @scroll-timeline -ominaisuutta, ja aseta käyttökokemus aina etusijalle.